<template>
    <div class="box">
        <div v-if="records.length == 0" class="no-records">
            <div class="no-records-text">暂无记录</div>
        </div>
        <div v-else>
            <div v-for="item in records" :key="item.id" @click="getSingleDetail(item)" class="recordCard">
                <div class="title-status">
                    <div class="title">{{ item.name }}的{{ item.flowName }}申请</div>
                    <div v-if="item.statusId > 0" class="status">
                        <div>{{ item.status }}</div>
                    </div>
                    <div v-else-if="item.statusId == -1 || item.statusId == -2" class="status-cancel">
                        <div>{{ item.status }}</div>
                    </div>
                </div>
                <!-- <div class="details">
                <div class="detailRow" v-for="recordItem in item.items" :key="item.itemName">
                    <div class="detailName">{{ recordItem.itemName }}：</div>
                    <div class="detailValue">{{ recordItem.itemValue }}</div>
                </div>
            </div> -->
                <div class="time">{{ item.createTime }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import router from "../router/index.js";

const props = defineProps({
    records: {
        type: Array,
        default: () => [],
    },
    useType: {
        type: String
    }
});

const getSingleDetail = (item) => {
    // 携带此记录ID跳转到详情页
    console.log("Navigating to record detail:", item);
    if (item.recordId) {
        if (props.useType == "application") {
            router
                .push({
                    name: "applicationSingleRecord",
                    params: {
                        recordId: item.recordId,
                        empId: item.empId,
                    },
                })
                .catch((err) => {
                    console.error("Navigation failed:", err);
                });
        } else {
            router
                .push({
                    name: "Approvaling",
                    params: {
                        recordId: item.recordId,
                        empId: item.empId,
                    },
                })
                .catch((err) => {
                    console.error("Navigation failed:", err);
                });
        }

    } else {
        console.error("Item ID is required for navigation");
    }
};

onMounted(() => {
    // 组件挂载时的逻辑
    // 例如：获取数据等
    console.log("RecordList mounted", props.records);
});
</script>

<style scoped>
.box {
    border-radius: 8px;
}

.recordCard,.no-records{
    padding: 10px;
    border: 1px solid white;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #fff;
    cursor: pointer;
    /* 添加鼠标悬停效果 */
}

.title-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #021148;
}

.details {
    margin-bottom: 10px;
    color: #9a9a9a;
    font-size: 13px;
}

.details div {
    margin-bottom: 5px;
}

.detailName {
    font-size: 16px;
    color: #021148;
    font-weight: bold;
}

.detailValue {
    font-size: 16px;
    color: #9a9a9a;
}

.status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.status,
.status-cancel div {
    padding: 4px 8px;
    border-radius: 4px;
    border: 3px solid #39ab0b;
    background-color: rgba(57, 171, 11, 26%);
    color: #39ab0b;
    font-size: 12px;
}

.status-cancel div {
    border: 3px solid #ae0d1d;
    background-color: rgba(174, 13, 29, 26%);
    color: #ae0d1d;
}

.time {
    font-size: 12px;
    color: #999;
    text-align: right;
}
</style>